<!--
 * @Description: 订单页面
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: 何梦龙
 * @LastEditTime: 2022-05-16 21:53:52
-->
<template>
  <div>
    <div class="dindan">订单</div>

    <!-- {{dindanfelData[1]}} -->

    <!-- 订单分类数据 -->
    <div class="dindan-div">
    <van-tabs v-model="active" @click="onClick">
  <van-tab :title="item"  v-for="item in dindanfelData" 
            :key="item.id"></van-tab>

           <div class="order" @click="$router.push('orderDetail')">
            <van-row type="flex" justify="center" >
              <div class="order_detail" v-for="item in orderduigoryData" :key="item.id" >
              <div class="user_avatar">
                <img :src="item.customer.userFace" alt="">               
              </div>
              <div class="order_item">
                <div>
                  <span>{{item.customer.username}}</span>
                  <span class="order_status">{{item.status}}</span>
                  <p class="addr">{{item.address.province 
                    + item.address.city + item.address.area + item.address.address}}</p>
                </div>
                <div class="date">{{item.orderTime | dateFormat}}
                  </div>
                <div class="price">￥{{item.total}}</div>
              </div>
            </div>
           </van-row>
          </div>
 <!-- <button @click="$router.push('orderDetail')">跳转到订单详情页面</button> -->

</van-tabs>
</div>


  <br />
  <br />
  <br />
  <br />
  <br />
    
   
  </div>
  
</template>

<script>
import {dinDan} from "@/api/index.js";
import { main } from "@/main.js";
export default {
  data() {
    return { 
      active: 0,
      //订单分类
      dindanfelData:['全部订单', '待派单', '待接单', '待确认', '已完成'],

      //订单数据
      dindangoryData:[],

      //分类页面对应的订单
      orderduigoryData:[],
      
     
    };
  },
  computed: {},
  methods: {
    //页面分类
    // onChange(index) {
    //   console.log(index);
    //   console.log(this.dindangoryData[index].status);
    //   // this.orderduigoryData=this.dindangoryData.filter((item)=>{
    //   //     return item.id==dindanfelData[index].id;
    //   //   });
    //   //   console.log(dindanfelData);
    //   // console.log(temp);
    // },
    
    onClick(name, title,status) {
      // console.log(name, title);
      //每点击一次title都调用一次订单的数据
      if (title == '全部订单') {
        this.orderduigoryData = this.dindangoryData;
      } 
      else if(title == '待派单'){
        this.orderduigoryData = this.dindangoryData.filter((item) => {
          return item.status == '待派单';
        });
      }

      else if(title == '待接单'){
        this.orderduigoryData = this.dindangoryData.filter((item) => {
          return item.status == '待接单';
        });
      }

      else if(title == '待确认'){
        this.orderduigoryData = this.dindangoryData.filter((item) => {
          return item.status == '待确认';
        });
      }

      else if(title == '已完成'){
        this.orderduigoryData = this.dindangoryData.filter((item) => {
          return item.status == '已完成';
        });
      }
      // this.loaddindangory();
    },
    
    //加载订单数据
    async loaddindangory(){
      let res=await dinDan({page:1,pageSize:100})
      this.dindangoryData=res.data.data.list;
      //  console.log(res.data.data.list.orderTime);
      // this.orderduigoryData=this.dindangoryData.filter((item)=>{
      //   return item.
      // })
      this.orderduigoryData = this.dindangoryData;
    },

     

  },
  created() {
    this.loaddindangory();
  },
  mounted() {}
};
</script>
<style scoped>
.dindan{
  font-size: 28px;
  /*文字对齐方式 */
  text-align: center;
  line-height: 50px;
  /*文字粗细*/
  font-weight: 500;
}
.time1{
  color: black;
  
}

.order{
  margin-top: 1em;
  padding: 0 2em;
}
.order_detail {
  width: 93%;
  height: 87px;
  margin: 0 0 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
}
.user_avatar {
    width: 80px;
    height: 80px;
    background-color: #9002bf;
    border-radius: 50%;
}
.user_avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.order_item {
  margin-left: 1em;
    flex: 2;
    height: 80px;
}

.order_status {
    float: right;
    font-size: 11px;
    color: #f8825d;
}
.addr {
    font-size: 12px;
    margin-top: 1em;
    color: #666;
}
.date {
  float: left;
  font-size: 10px;
}
.price {
    float: right;
    text-align: right;
    font-size: 10px;
}



</style>